<template>
  <div class="page white-stage">
    <div class="team-main">
      <group class="no-margin">
        <x-input title="团队名称" v-model="team.team_name" placeholder="请输入团队名称" novalidate :icon-type="iconType" :show-clear="false" @on-blur="onBlur" placeholder-align="right"></x-input>
        <cell @click.native ="selectManager" direction="rtl" title="营销主管" :value="selectManagerValue"  ></cell>
        <cell @click.native="selectMembers" direction="rtl" title="营销顾问" :value="selectMembersValue" ></cell>
      </group>
      <div class="btn-group">
        <span class="btn save-btn" @click="saveTeam">保存</span>
      </div>
      </div>
    </div>
</template>

<script>
  import Vue from 'vue'
  import clientMenu from '../components/client-menu'
  import {XInput, Group, Selector, Cell} from 'vux'
  import store from '../store'

  export default {

    data() {
      return {
        team:{
          parent_id: "0"
        },
        iconType: '',
        team_managers: [],
        team_members: [],
        selected_team_managers:[],
        selected_team_members:[],
        selectManagerValue: '选择营销主管',
        selectMembersValue: '请选择营销顾问',

        // clientSourceValue: '',
        // industryValue: '',
        // teamGenderValue: '',

        marketingChargers: [
        {
          key : '0',
          value: '李丽萍'
        },
        {
          key: '1',
          value: '林宇'
        }
        ],

        counselor : [

        {
          key: '0',
          value:'林丽亲'
        },

        {
          key:'1',
          value:'李美英'}
        ],

        amounts : [

        {
          key: '0',
          value:'100'
        },

        {
          key:'1',
          value:'50'
        }
        ]
      }
    },
    components:{
      XInput,
      Group,
      Selector,
      Cell
    },
    methods: {
      refresh (iscroll) {
      console.log('refresh')
      // Refresh current data
      },

      log () {
      console.log('ee');
      },

      load (iscroll) {
      console.log('load')
      // Load new data
      },

      test () {
      console.log('test')
      },

      onBlur () {

      },

      saveTeam() {

      let that = this;

      store.dispatch('saveTeams', that.team)
        .then(function(response){
        if(response.data.errcode === 0) {
          alert('保存成功!');
          that.$router.back();
        } else {
          console.debug('系统出错!请联系管理员', response.data);
        }
        }).catch((error) =>{
        console.debug(error, '系统出错!请联系管理员')
        });
      //
      //   console.log("this.team", JSON.stringify(this.team));
      //
      //   let response = {errcode:0};
      //
      //   if(response.errcode === 0) {
      //     alert('保存成功!');
      //     this.$router.back();
      //   } else {
      //     alert('系统出错!请联系管理员');
      //   }
      },

      onShow () {
      this.callJsApi('biz.navigation.setTitle',{title:'新增团队'});
      },

      selectManager () {

        console.log('selectManager')
        var that = this;
        let users = [];

        this.selected_team_managers
        .forEach(function(element){
          users.push(element.emplId);
        })


        this.callJsApi('biz.contact.choose',{users: users})
        .then(function(data){
          console.log(JSON.stringify(data));

          var team_managers = [];

          data.forEach(function(object, index){
            team_managers.push({
              ding_user_id : object.emplId,
              name : object.name
            })
          });

          that.team_managers = team_managers;
          that.team.team_managers = team_managers;
          that.selected_team_managers = data;
        });
      },

      selectMembers () {

      var that = this;
      let users = [];

      this.selected_team_members.forEach(function(element){
        users.push(element.emplId);
      })

      this.callJsApi('biz.contact.choose',{
        users: users,
      }).then(function(data){

        var team_members = [];

        data.forEach(function(object, index) {
          team_members.push({
            ding_user_id : object.emplId,
            name : object.name
          })
        });

        console.log(that, 'team_members');

        that.team_members = team_members;
        that.team.team_members = team_members;
        that.selected_team_members = data;
      });
      }

    },

    watch:{

      mkChargerValue(value){
        this.team.orderway = value;
      },
      counselorValue(value){
        this.team.counselor = value;
      },
      amountValue(value){
        this.team.amount = value;
      },

      team_members(value) {

        var selectManagerValue = '';
        var isNotElippse = false;

        this.selected_team_members.forEach(function(object, index){
          if(index < 3) {
            selectManagerValue += (index === 0 ? '' : '、')+object.name;
          } else if(isNotElippse === false) {
            selectManagerValue += '...';
            isNotElippse = true;
          }
        });

        this.selectMembersValue = selectManagerValue;
      },

      team_managers(value) {

        var selectManagerValue = '';
        var isNotElippse = false;

        this.selected_team_managers.forEach(function(object, index){
          if(index < 3) {
            selectManagerValue += (index === 0 ? '' : '、')+object.name;
          } else if(isNotElippse === false) {
            selectManagerValue += '...';
            isNotElippse = true;
          }
        });

        this.selectManagerValue = selectManagerValue;
      }

    },

    mounted() {
      this.callJsApi('biz.navigation.setTitle',{title:'新增团队'});
    },


  }
</script>

<style lang='less'>
  @import "../less/index.less";

  .team-main{

  .no-margin{
     &>*{
     margin: 0
     }
  }

  .add-new-btn{
    width: 60%;
  }

  .btn-group{
    margin-top: 15px;

    &>*{
    width: 80%;
    text-align: center;
    border-radius: 4px;
    padding: 10px;
    margin: 0 auto;
    border: 1px solid rgb(229, 229, 229);
    background-color: white;
    color:#23B2E2;
    display: block;
    }

    .pull-left{
    float: left;
    }

    .pull-right{
    float: right;
    }
  }

  .cell::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    left: 15px;
    }

  }
</style>
